<template>
  <view class="career-prospects">
    <view class="top">
      <view class="title-logo"></view>
      <view class="major-name">就业前景</view>
    </view>
    <view class="middle">
      <view class="search-title">
        <view class="title">月平均薪酬变化</view>
        <view class="citySelected" @click="chooseCity"
          >{{ currentRegion.label || '全国' }}<img :src="downArrowImg" />
        </view>
      </view>
      <view class="salary-data-show">
        <view class="middle"
          >月薪中位数
          <view class="blueMoney"
            >￥{{ salaryRegionData.fiftyPercentile || '-' }}</view
          >
        </view>
        <view class="middle line">|</view>
        <view class="middle"
          >环比上月
          <view class="blueMoney">{{
            PositiveNegative(salaryRegionData.ratio) || '-'
          }}</view>
        </view>
      </view>
      <view scroll-y="true">
        <chart-month :salaryRegionChart="salaryRegionChart"></chart-month>
        <view class="middle-line"></view>
        <view class="title">就业方向薪酬分布</view>
        <chart-year :salaryWorkYearChart="salaryWorkYearChart"></chart-year>
        <view class="middle-line"></view>
        <view class="title">工作年限薪酬分布</view>
        <chart-education
          :salaryEducationChart="salaryEducationChart"
        ></chart-education>
      </view>
    </view>
  </view>
</template>

<script>
import {
  getSalaryRegion,
  getPositionSalary,
  getWorkYearSalary
} from '@/api/modules/career';
import chartMonth from './charts/chartMonth';
import chartYear from './charts/chartYear';
import chartEducation from './charts/chartEducation';

import regionSelector from '@/pagesSub/careerNew/positionDictionary/components/regionSelector';
import { getRegionList } from '@/api/modules/positionDictionary';

export default {
  props: {
    positionTagId: {
      type: String,
      default: ''
    },
    currentRegion: {
      type: Object,
      default() {
        return { label: '全国', value: '100000' };
      }
    }
  },
  components: {
    chartMonth,
    chartYear,
    chartEducation,
    regionSelector,
  },
  watch: {
    currentRegion: {
      handler(newValue, oldValue) {
        console.log('-----watch---------->', newValue);
        if (newValue) {
          //选择城市变化，重新请求
          this.currentRegion = newValue;
          this.salaryRegionData = {
            fiftyPercentile: '0',
            ratio: null,
            list: []
          };
          this.getThreeChartsData();
        }
      },
      immediate: true
    }
  },
  data() {
    return {
      downArrowImg:
        this.$imgBase + 'career/positionDictionary/downArrowInBasicInfo.png',
      iconUrl: this.$imgBase + 'pcenter/icon1.png',
      salaryRegionData: {
        fiftyPercentile: '0',
        ratio: null,
        list: []
      },
      salaryRegionChart: {},
      salaryWorkYearChart: {},
      salaryEducationChart: {}
    };
  },
  created() {
    this.getThreeChartsData();
  },
  methods: {
    /* 选择城市 */
    chooseCity() {
      this.showRegionSelect = true;
      //   this.regionShow = true;
      this.$emit('showSelectRegion');
    },
    PositiveNegative(str) {
      if (str && str != '') {
        if (str[0] != '-') {
          return '+' + str;
        }
      }
      return str;
    },
    getThreeChartsData() {
      const params = {
        positionTagId: this.positionTagId || '10002',
        regionIds: this.currentRegion.value
      };
      getSalaryRegion(params).then((res) => {
        if (res.code == 200) {
          console.log('res', res);
          this.salaryRegionData.fiftyPercentile =
            res.data.fiftyPercentile.toFixed(0);
          this.salaryRegionData.ratio = res.data.ratio;
          let result = {
            dataX: [],
            dataY: []
          };
          res.data.list.forEach((item) => {
            result.dataX.push(item.month + '\n' + item.year);
            result.dataY.push(Math.floor(item.salaryNum));
          });
          this.salaryRegionChart = result;
        } else {
          console.log('请求失败');
        }
      });
      getPositionSalary(params).then((res) => {
        if (res.code == 200) {
          let result = {
            dataX: [],
            dataY: []
          };
          res.data.forEach((item) => {
            result.dataX.push(item.xTitle);
            result.dataY.push(Math.floor(item.yValue));
          });
          this.salaryWorkYearChart = result;
        }
      });
      getWorkYearSalary(params).then((res) => {
        if (res.code == 200) {
          let result = {
            dataX: [],
            dataY: []
          };
          res.data.forEach((item) => {
            result.dataX.push(item.expCodeStr);
            result.dataY.push(Math.floor(item.salaryNum));
          });
          this.salaryEducationChart = result;
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
@font-face {
  font-family: 'D-DIN-PRO-700-Bold';
  /*定义字体名称*/
  src: url('https://img3.job1001.com/ypMp/elan/images/career/positionDictionary/D-DIN-PRO-700-Bold.ttf');
}

.career-prospects {
  background: #ffffff;
  border-radius: 24rpx;
  width: 100%;
  padding: 28rpx 0rpx;
  margin: 20rpx 0;

  .top {
    display: flex;
    flex-direction: row;
    align-items: center;
    position: relative;
    padding: 0rpx 24rpx;

    .title-logo {
      width: 8rpx;
      height: 28rpx;
      background: #f75a3e;
      border-radius: 4rpx;
      margin-left: 8rpx;
    }

    .major-name {
      font-weight: bold;
      font-size: 32rpx;
      color: #000000;
      margin-left: 24rpx;
    }
  }

  .middle {
    margin-top: 24rpx;

    .title {
      font-weight: 800;
      font-size: 32rpx;
      color: #333333;
      padding: 0rpx 24rpx;
    }

    .search-title {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      padding: 0rpx 24rpx;
      .title {
        font-weight: 800;
        font-size: 32rpx;
        color: #333333;
      }

      .citySelected {
        display: flex;
        align-items: center;
        // padding: 0 44rpx;
        font-size: 24rpx;
        color: #888888;
        background: #f6f6f6;
        padding: 16rpx;
        border-radius: 12rpx;
        display: flex;
        line-height: 36rpx;

        img {
          margin-left: 8rpx;
          width: 32rpx;
          height: 32rpx;
        }
      }
    }

    .salary-data-show {
      display: flex;
      justify-content: center;
      align-items: center;
      color: #999999;
      font-size: 26rpx;
      font-weight: 400;
      margin-top: 34rpx;
      padding: 0 44rpx;

      .middle {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin: 0 30rpx;

        .blueMoney {
          color: #066bff;
          font-size: 36rpx;
          font-weight: bold;
          font-family: 'D-DIN-PRO-700-Bold';
        }
      }

      .line {
        font-size: 40rpx;
        line-height: 40rpx;
        color: #e5e5e5;
      }

      .echarts-wrap {
        width: 100%;
        margin-top: 12rpx;
      }
    }
  }

  .middle-line {
    width: calc(100% - 50rpx);
    margin: 10rpx 24rpx 26rpx 46rpx;
    height: 2rpx;
    background-color: #f4f4f4;
    margin-bottom: 46rpx;
  }

  .btn-group {
    padding: 0 24rpx;
    line-height: 102rpx;

    .cancel,
    .confirm {
      padding: 0 16rpx;
    }
  }

  ::v-deep .u-form-item--right__content__slot {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .left {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .form-left-image {
      padding-right: 20rpx;
      width: 40rpx;
      height: 40rpx;
    }

    .form-title {
      color: #222;
    }

    .placeholder {
      line-height: 40rpx;
    }
  }
}
</style>
